<template>
    <div>
        <x-checkbox v-model="checkBox1">苹果</x-checkbox>{{checkBox1}}
        <x-checkbox v-model="checkBox2">香蕉</x-checkbox>{{checkBox2}}
        <br>
        <x-checkbox v-model="checkBox3" true-label="hello" false-label="bye">1</x-checkbox>{{checkBox3}}
        <br>
        <x-checkbox v-model="checkBox4" :label="1">1</x-checkbox>
        <x-checkbox v-model="checkBox4" :label="2" @change="change"/>{{checkBox4}}
        <br>
        <x-checkbox-group v-model="checkBox5" :disabled="true">
            <x-checkbox label="a">a</x-checkbox>
            <x-checkbox label="b">b</x-checkbox>
            <x-checkbox label="c">c</x-checkbox>
        </x-checkbox-group>
        <br>
        <x-checkbox-group v-model="checkBox5" @change="groupChange">
            <x-checkbox label="a">a</x-checkbox>
            <x-checkbox label="b">b</x-checkbox>
            <x-checkbox label="c">c</x-checkbox>
        </x-checkbox-group>{{checkBox5}}
    </div>
</template>
<script>
    export default {
        data() {
            return {
                checkBox1: false,
                checkBox2: true,
                checkBox3: 'bye',
                checkBox4: [],
                checkBox5: ['a'],
            }
        },
        methods:{
            groupChange(val){
                console.log('group Change',val)
            },
            change(val){
                console.log('change',val)
            }
        }
    }

</script>